//  mymind.js  继承 mycanvase.js中的基本类实现

// 主题节点的类型
const SubType = {
	main:"Main",
	branch:"Branch",
	child:"child"
}

// 主题是左，右的区分
const SubDirection = {
	left: "left",
	right: "right"
}

const SubLinkColors = ["#880000", "#BB5500", "#888800", "#227700", "#008844", "#008888","#003377","#000088", "#550088", "#6D0088"]

// 垂直方向
const SubPadding = 16

// 水平方向
const SubMargin = 60

const SubLinkLayNum = 10


class MyMindCanvase extends MyCanvase {
	constructor(id, fullscreen=false) {
	    super(id, fullscreen)
		
	}
	
	handleKeydown(event){
		console.log("mymindCanvase keydown", event.key)
		
		// 回车添加同级别主题
		if(event.key== "Enter"){
			if(this.activeShape!=null)
			{
				if(this.activeShape.subtype == SubType.main){
					
					let sub = new SubjectShape(this, -10000, -10000, "分支主题", SubType.branch)
					this.activeShape.addRihgt(sub)
					this.add(sub)
					this.activeShape.invalidate()
					
				}else if(this.activeShape.subtype == SubType.branch){
					
					let sub = new SubjectShape(this, -10000, -10000, "分支主题", SubType.branch)
					this.activeShape.parent.addRihgt(sub)
					this.add(sub)
					this.activeShape.invalidate()
					
				}else if(this.activeShape.subtype == SubType.child){
					
					let sub = new SubjectShape(this, -10000, -10000, "子主题", SubType.child)
					this.activeShape.parent.addRihgt(sub)
					this.add(sub)
					this.activeShape.invalidate()
						
				}
			}	
		}	
	
		// delete 删除子节点
		if(event.key === "Delete"){
			if(this.activeShape!=null){
				if(this.activeShape.subtype == SubType.child || this.activeShape.subtype == SubType.branch){
					if(this.activeShape.childrenLeft.length === 0 && this.activeShape.childrenRight.length === 0){
						
						
						this.activeShape.parent.deleteChild(this.activeShape)
						this.remove(this.activeShape)
						this.activeShape.parent.invalidate()
						this.activeShape = null
						
					}
				}
			}
		}
	}
}


class SubjectShape extends TextShape{
	constructor(mycanvase, left, top, text, subtype=SubType.child, parent=null) {
		super(mycanvase, left, top)
		this.text = text
		this.subtype = subtype
		
		// 在右边的
		this.childrenRight = []
		this.childrenRightHeight = null
		
		this.childrenLeft = []
		this.childrenLeftHeight = null
		
		this.linkLines = []
		
		this.parent = parent
		
		this.paddingRight = "12px"
		this.paddingLeft = "12px"
		this.paddingBottom = "-4px"
		
		if(subtype == SubType.main){
			this.font = "16px Arial"
			this.border = "solid 2px black"
		}
		
		if(subtype == SubType.branch){
			this.font = "14px Arial"
			this.border = "none"
			this.borderBottom = "solid 2px black"
			
		}
		
		if(subtype == SubType.child){
			this.font = "12px Arial"
			this.border = "none"
			this.borderBottom = "solid 2px black"
		}

		this.direction = SubDirection.right
		
		// this.padding = "10px"
		
		this.adjust()
	}
	
	addRihgt(subShape){
		
		
		// console.log("addRight", subShape.subtype, this.subtype)d
		
		this.childrenRight.push(subShape)
		subShape.parent = this
		
		if(subShape.subtype == SubType.branch){
			
			let cl = SubLinkColors[this.childrenRight.length % SubLinkColors.length]
			subShape.borderBottom = "solid 2px "+cl
		}
		
		if(subShape.subtype == SubType.child && this.subtype==SubType.branch){
			
			// 先替换多个空格为单个，再移除末尾的 ; 和周围空格，最后 trim
			let style = this.borderBottom
			const normalized = style
			  .replace(/ +/g, ' ')           // 多个空格 → 单个空格
			  .replace(/\s*;\s*$/, '')       // 移除末尾的 ; 及其前后空格
			  .trim();                       // 再次 trim 确保首尾无多余空格
			  
			const result = normalized.split(' ');
			
			let [ls, lw, lc] = result
			
			subShape.borderBottom = "solid 2px "+lc
			
		}
		
		if(subShape.subtype == SubType.child && this.subtype==SubType.child){
			
			subShape.borderBottom = this.borderBottom
			
		}
		
	}
	
	addRihgtAtIndex(subShape, idx=null){
		if(idx==null || idx >= this.childrenRight.length){
			this.childrenRight.push(subShape)
			subShape.parent = this
			return true
		}else if(idx <=0){
			this.childrenRight.unshift(subShape)
			subShape.parent = this
			return true
		}else{
			this.childrenRight.splice(idx, 0, subShape)
			subShape.parent = this
			return true
		}
	}
	
	// 计算主题和子主题的高度，取最大值。 
	calculateRihgtHeight(){
		let chHeight = 0
		if(this.childrenRight){
			this.childrenRight.forEach((subshape)=>{
				chHeight +=(SubPadding + subshape.calculateRihgtHeight())
			})
			chHeight -=SubPadding
		}
		this.childrenRightHeight = this.height > chHeight ? this.height : chHeight
		// console.log(this.text, this.childrenRightHeight)
		return this.childrenRightHeight
	}
	
	// 计算出右边所有shap的left，top坐标
	layoutRight(){
		
		// 子节点的最高位置
		let cy = this.top + this.height/2  - this.childrenRightHeight/2
		let cx = this.left + this.width + SubMargin
		
		
		this.removeLinkLines()
		for(let sshape of this.childrenRight){
			sshape.left = cx
			sshape.top = cy + sshape.childrenRightHeight/2 - sshape.height/2
			
			this.linkRihgt(sshape)
			
			cy += sshape.childrenRightHeight + SubPadding
		}
		
		
		for(let sshape of this.childrenRight){
			sshape.layoutRight()
		}
	}

	
	linkRihgt(sshape){
		
		let point1 = {x: this.left+ this.width, y: this.top + this.height}
		
		if(this.subtype==SubType.main){
			point1.y = this.top + this.height/2
		}
		
		let point2 = {x: sshape.left, y:sshape.top+sshape.height}
		let curlien = new HoriCurveShape(this.mycanvase, point1, point2)
		
		curlien.style = sshape.borderBottom
		
		this.mycanvase.add(curlien, SubLinkLayNum)
		this.linkLines.push(curlien)
		
	}
	
	removeLinkLines(){
		this.linkLines.forEach((line)=>{
			this.mycanvase.remove(line, SubLinkLayNum)
		})
		this.linkLines = []
	}
	
	relayout(){
		let p = this
		while(p.parent!=null){
			p = p.parent
		}
		p.calculateRihgtHeight()
		p.layoutRight()
	}
	
	// 失效时重新计算, 步骤，1、重新计算width, height。 2， 进行relayout的布局计算， 3， 通知画布进行重绘 
	invalidate(){
		// console.log("sub invalidate", this.text)
		super.adjust()
		this.relayout()
		super.invalidate()
	}
	
	
	
	deleteChild(subShape){
		this.childrenRight.splice(this.childrenRight.indexOf(subShape), 1)
		this.childrenLeft.splice(this.childrenLeft.indexOf(subShape), 1)
	}
	
	draw(ctx){
		
		super.draw(ctx)
		
		if(this.isHover ){
			let  r = 4
			if(this.direction == SubDirection.right){
				
				let cx = this.left + this.width - r
				let cy = this.top + this.height / 2
				
				ctx.save()
				
				ctx.beginPath()
				ctx.arc(cx, cy, r+1, 0, Math.PI *2)
				ctx.fillStyle = "blue"
				ctx.fill()
				// ctx.strokeStyle="blue"
				// ctx.lineWidth=2
				// ctx.stroke()
				
				ctx.beginPath()
				drawLine(ctx, {x:cx, y:cy-r}, {x:cx, y:cy+r}, "solid 2px white")
				drawLine(ctx, {x:cx-r, y:cy}, {x:cx+r, y:cy}, "solid 2px white")
				
				ctx.restore()
			}
			
		}
	}
	
	OnClick(x, y){
		
		// console.log("onclick subshape", this.isHover)
		if(this.isHover){
			// console.log("onclick subshape isHover")
			let r = 4
			if(this.direction == SubDirection.right){
				
				let cx = this.left + this.width - r
				let cy = this.top + this.height / 2
				
				// console.log(x, y, cx, cy)
				// 点击范围内, 新增新的节点
				if( x > cx - r-1 && x <cx+r+1  && y>cy-r-1 && y<cy+r+1){
					
					if(this.subtype == SubType.main){
						let sub = new SubjectShape(this.mycanvase, -10000, -10000, "分支主题", SubType.branch)
						this.addRihgt(sub)
						this.mycanvase.add(sub)
						this.invalidate()
					}else{
						let sub = new SubjectShape(this.mycanvase, -10000, -10000, "子主题", SubType.child)
						this.addRihgt(sub)
						this.mycanvase.add(sub)
						this.invalidate()
					}
					return true
				}
				
			}
		}
		
		super.OnClick(x,y)
		
	}
	
	
	
	
}